<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>校园综合服务系统</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script>
        $(document).ready(function(){
            var urlParams = new URLSearchParams(window.location.search);
            var id = urlParams.get('id');
            var user = window.localStorage.getItem("username");
            // console.log(user);

            var username = JSON.parse(user).username;

            $.post("http://localhost:80/blog/view-blog", {id: id}, function(response) {
                var rs = $.parseJSON(response);
                if (rs.code != "00000") {
                    alert("查看帖子失败");
                    return;
                }
                var blog = rs.data;
                console.log(blog);
                $("div.container").append("<p>" + blog.title + "</p>");
                $("div.container").append("<p>作者：" + blog.author_realname + "</p>");
                $("div.container").append("<p>发布时间：" + blog.publish_time + "</p>");
                $("div.container").append("<p>" + blog.content + "</p>");

                var commentsContainer = $("<div></div>");
                $.each(blog.comments, function(index, comment) {
                    commentsContainer.append("<p>" + (comment.is_anonymous ? "匿名用户" : comment.username) + ": " + comment.content + "</p>");
                });
                $("div.container").append(commentsContainer);

                var commentForm = $("<form id='addCommentForm'></form>");
                commentForm.append("<input type='hidden' name='blog_id' value='" + id + "'</>");
                commentForm.append("<input type='hidden' name='username' value='" + username + "'/>");
                commentForm.append("<textarea name='content' placeholder='评论内容' required></textarea>");
                commentForm.append("<input type='checkbox' name='is_anonymous' value='1'> 匿名评论");
                commentForm.append("<input type='submit' value='提交评论'/>");
                $("div.container").append(commentForm);

                commentForm.submit(function(event){
                    event.preventDefault();
                    var formData = $(this).serialize();
                    $.post("http://localhost:80/blog/add-comments-blogs", formData, function(response) {
                        var rj = $.parseJSON(response);
                        if (rj.code != "00000") {
                            alert(rj.message);
                        } else {
                            alert("评论成功");
                            // location.reload();
                            loadComments(id);
                        }
                    });
                });

                function loadComments(id) {
                    $.post("http://localhost:80/blog/view-blog", {id: id}, function(response) {
                        var rs = $.parseJSON(response);
                        if (rs.code != "00000") {
                            alert("加载评论失败");
                            return;
                        }
                        var blog = rs.data;
                        var commentsContainer = $("div.container div#comments");
                        commentsContainer.empty();
                        $.each(blog.comments, function(index, comment) {
                            commentsContainer.append("<p>" + (comment.is_anonymous ? "匿名用户" : comment.username) + ": " + comment.content + "</p>");
                        });
                    });
                }
            });
        });
    </script>
    <style>
        .container {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>博客详情</h1>
    <a href="user_courses.html">我的课程</a><br>
    <a href="all_courses.html">选课</a><br>
    <a href="all_blogs.html">校园论坛</a><br>
    <a href="change_pwd.html">修改密码</a><br>
</div>
</body>
</html>